<?php
$ci = &get_instance();
$ci->load->model("subcategory");

$subcategories = $ci->subcategory->getAllRecords();
?>

<style>
    /*
	Flickr Gallery
	*/
	
	
	.thumbs { margin: 0; padding: 0; overflow: hidden; }
	.thumbs li { list-style: none; float: left; margin: 5px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 2px #000; }
	.thumbs li a { }
	.thumbs li img { display: block; }
	.thumbs li a img { border: none;}

	#cycle { margin: 0; padding: 0; width: 500px; height: 333px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000;}
	#cycle li { position: relative; list-style: none; margin: 0; padding: 3px; width: 500px; height: 333px; overflow: hidden; }
	#cycle li div { position: absolute; bottom: 3px; left: 3px; padding: 3px; width: 494px; background: black; color: white; font-size: 12px; opacity: .8; }
	

    img {
        max-width: none;
    }

    .pasos{
        width: 100%;
        overflow:hidden;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .pasos ul{
        margin: 0;
        padding: 0;
        font: bold 14px Verdana;
        list-style-type: none;
        text-align: center; /* "left", "center", or "right" align menu */
    }

    .pasos li{
        display: inline;
        margin: 20px;
    }

    .pasos li a{
        display:inline-block;
        text-align:center;
        text-decoration: none;
        color: white;
        background:orange;
        margin: 0;
        margin-right:5px; /*right spacing between each link */
    }

    .paso_seleccionado{
        width:15px;
        height:15px;
		
    }

    .paso_no_seleccionado{
        width:5px;
        height:5px;
		border-radius: 100px; /*really large border radius to create round borders*/
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
    }

    .pasos a span{
        position:relative;
        top:40%;
    }

    .pasos li a:visited{
        color: white;
    }

    .pasos a:hover{
        background: orange;
    }
    /*
    Boton Siguiente
    */
    .btn-siguiente {
        color: #FFFFFF;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #FFA500;
        background-image: -moz-linear-gradient(top, #FFA500, #FFA500);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFA500), to(#FFA500));
        background-image: -webkit-linear-gradient(top, #FFA500, #FFA500);
        background-image: -o-linear-gradient(top, #FFA500, #FFA500);
        background-image: linear-gradient(bottom, #FFA501, #FFA500);
        background-repeat: repeat-x;
        border-color: #FFA500;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA500', endColorstr='#FFA500', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    }
    .btn-siguiente:hover,
    .btn-siguiente:active,
    .btn-siguiente.active,
    .btn-siguiente.disabled,
    .btn-siguiente[disabled] {
        color: #FFFFFF;
        background-color: #FFA500;
    }
    .titulo-prev{
        
        float: left;
    }
    .descripcion-prev{
         float: left;
        
    }
</style>

<div class="container contenido publica">

    <div class="pasos">
        <ul>
            <li><a href="<?php echo site_url('registro/tu_curso'); ?>" class="paso_no_seleccionado"><span></span></a></li>
            <li><a href="#" class="paso_seleccionado"><span></span></a></li>
            <li><a href="#" class="paso_no_seleccionado"><span></span></a></li>
        </ul>
    </div>
    <div style="text-align:center;"><span style="color:#514F4F; font-weight:regular;">Tu curso esta a un paso de ser publicado.</span><span style="color:#FFA563; font-weight: bold;"> Elegí la foto que lo representa.</span></div>
    <div class="row-fluid">
    <br>
    <br>
    <br>
		</div>
    <div style="float:left;width:40%;margin-left:2em;color:#67717a;">Seleccione el origen de su imagen</div>
    <div style="float:right;width:35%;margin-left:2em;color:#67717a;">Así se verá tu curso</div>
       <div style=" float:left; width:55%; margin:0em 2em 2em 2em;border-radius: 2px;" >
    <div class="fila" style=" width:100%;border: 1px solid #d0d0d0;padding:20px;">
         <a class="btn" style="width:44%;" href="<?=site_url('registro/imagen')?>" target="_self">Imágenes Prediseñadas</a>
         <a class="btn btn-siguiente" style="width:44%;font-weight:bold;" href="<?=site_url('publica/subir_imagen')?>" target="_self">Subir Imagen de Mi PC </a>
		 
         
    </div>
     <div class="fila" style="width:100%;padding:20px;padding-top:80px;padding-bottom:80px; text-align:center;vertical-align:middle; float:left; border: 1px solid #d0d0d0; margin:-0.1em 0em 0em 0em;border-radius: 2px;">
      
       

<?php echo form_open_multipart('subir/do_upload');?>

<input type="file" name="userfile" size="20" />

<br /><br />
<a><img src="<?= base_url().'/public/images/img-subir.png'?>"></a>  <br /><br />
<input class="btn btn-siguiente"type="submit" value="Subir" />

</form>         
         

</div>           
</div>
        <div style=" text-align:center;float:right; width:32%; margin:0em 2em 0em 2em;padding-top:14px;border: 1px solid #d0d0d0;border-radius: 2px;" >

       <div class="crop2" ><img src="<?= base_url().'/public/images/cursos/ed_fis_gde.jpg'?>" /></div>   
     
       <div style="float: left; width: 100%">
        <div class="titulo-prev"><?php echo $titulo;?></div>
        <div class="descripcion-prev"> <?php echo $descripcion_corta;?>.</div>   
           
           
       </div>
       

        </div>
		
	<form id="form_publicar" class="form-horizontal publica-form" accept-charset="utf-8" method="post" action="<?php echo site_url('registro/cargar_instituto'); ?>">	
		<div style="float:right;width:55%;margin-left:2em;color:#67717a;">
		
			

			<!-- input de la foto -->
			<input type="file" style="visibility:hidden" id="img_pc" name="img_pc">
			

		</div>
	</form>
   
   <script>
   
	$('#btn-subir-img').click(function() {
        $('#img_pc').click();
    });
	
	//Envio del Form
    $('#btn-paso2').click(function() {
        
		$('#form_publicar').submit();
            return false;

    }); //submit
	
	$('#buscar_imagen').change(function() {	
		
		$('#cbox').html("");
		$('#cbox').jflickrfeed({
			limit: 14,
			qstrings: {
				tags : $('#buscar_imagen').val()
			}
			
	}, function(data) {
		$('#cbox a').colorbox();
	});
		
	});
	
   </script>